<html>
<#include "../common/header.ftl">

<body>
<#--头部栏-->
<#include "../common/top_nav.ftl">
<div id="wrapper " class="toggled">
    <div class="row clearfix">
        <div class="col-md-1 column">
        <#--左边栏sidebar-->
   <#include "../common/left_nav.ftl">
        </div>
    <#--主要内容content-->
        <div class="col-md-11 column">
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <a class="btn btn-default pull-right" onclick="show('创建问卷','/form/add',600,200)"
                               style="margin-bottom: 30px">创建问卷</a>
                            <table class="table table-bordered table-condensed" >
                                <thead >
                                <tr >
                                    <th >序号</th>
                                    <th >问卷id</th>
                                    <th >问卷名称</th>
                                    <th >问卷状态</th>
                                    <th >分支数量</th>
                                    <th >创建时间</th>
                                    <th colspan="2">操作</th>
                                </tr>
                                </thead>
                                <tbody >
                        <#list formList.content as formDTO>
                        <tr>
                            <td > ${formDTO_index+1!}</td>
                            <td >${formDTO.getFormId()!}</td>
                            <td >${formDTO.getFormName()!}</td>
                            <td ><span class="label label-primary">${formDTO.getStatus()!}</span></td>
                            <td >${formDTO.getMainProblemNumber()!}</td>
                            <td >${formDTO.getCreateTime()!}</td>
                            <td >
                                <#if formDTO.getStatus()=='未开始'>
                                     <button href="javascript:;" class="btn btn-default"
                                             onclick="doStatus('开始答卷','/form/toStatus','${formDTO.getFormId()!}','${formDTO.getStatus()!}')">
                                         开始答卷
                                     </button>
                                <#elseif formDTO.getStatus()=='已开始'>
                                     <button href="javascript:;" class="btn btn-default"
                                             onclick="doStatus('停止答卷','/form/toStatus','${formDTO.getFormId()!}','${formDTO.getStatus()!}')">
                                         停止答卷
                                     </button>
                                </#if>
                                <#if formDTO.getStatus()!='已开始'>
                                <a class="btn btn-default"
                                   onclick="show('添加分支','/mainProblem/add?formid=${formDTO.getFormId()!}',500,200)">添加分支</a>
                                    <#if (formDTO.getMainProblemNumber()!=0)>
                                     <a class="btn btn-default"
                                        onclick="show('添加问题','/problem/addProblem?id=${formDTO.getFormId()!}',800,500)">添加问题</a>
                                    </#if>
                                </#if>
                                <a class="btn btn-default" href="/form/detail?id=${formDTO.getFormId()!}">详情</a>
                                <button href="javascript:;" class="btn btn-default"
                                        onclick="doStatus('删除问卷','/form/doDelete','${formDTO.getFormId()!}','${formDTO.getStatus()!}')">
                                    删除
                                </button>
                            </td>
                        </tr>
                        </#list>
                                </tbody>
                            </table>
                        </div>

                    <#--分页-->
                        <div class="col-md-12 column">
                            <ul class="pagination pull-right">
                    <#if currentPage lte 1>
                        <li class="disabled"><a href="#">上一页</a></li>
                    <#else>
                        <li><a href="/form/list?page=${currentPage - 1}&size=${size}">上一页</a></li>
                    </#if>

                    <#list 1..formList.getTotalPages()! as index>
                        <#if currentPage == index>
                            <li class="disabled"><a href="#">${index}</a></li>
                        <#else>
                            <li><a href="/form/list?page=${index}&size=${size}">${index}</a></li>
                        </#if>
                    </#list>

                    <#if currentPage gte formList.getTotalPages()!>
                        <li class="disabled"><a href="#">下一页</a></li>
                    <#else>
                        <li><a href="/form/list?page=${currentPage + 1}&size=${size}">下一页</a></li>
                    </#if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<#--弹窗-->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    提醒
                </h4>
            </div>
            <div class="modal-body" id="mes">
                你有新的订单
            </div>
            <div class="modal-footer">
                <button onclick="javascript:document.getElementById('notice').pause()" type="button"
                        class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button onclick="location.reload()" type="button" class="btn btn-primary">查看新的订单</button>
            </div>
        </div>
    </div>
</div>

<#--播放音乐-->
<audio id="notice" loop="loop">
    <source src="../mp3/song1.mp3" type="audio/mpeg"/>
</audio>


<script>
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://123.207.37.80:9900/webSocket/${userId}');
    } else {
        alert('该浏览器不支持websocket!');
    }

    websocket.onopen = function (event) {
        console.log('建立连接');
    }

    websocket.onclose = function (event) {
        console.log('连接关闭');
    }

    websocket.onmessage = function (event) {
        console.log('收到消息:' + event.data)
        //弹窗提醒, 播放音乐
        $('#myModal').modal('show');
        $("#mes").append(event.data);

        document.getElementById('notice').play();
    }

    websocket.onerror = function () {
        alert('websocket通信发生错误！');
    }

    window.onbeforeunload = function () {
        websocket.close();
    }


</script>

</body>
</html>
